import React,{useState} from "react"
import List from './components/list'
import Input from './components/input'
import Foot from './components/footer'
function Todu(){
  const [ToduList,setToduList] = useState(localStorage.getItem('toduList')?JSON.parse(localStorage.getItem('toduList')):[
    {id:Date.now()-2,name:'学习',done:true},
    {id:Date.now()-3,name:'吃饭',done:true},
    {id:Date.now()-4,name:'睡觉',done:false},
    {id:Date.now()-5,name:'打豆豆',done:false},
  ])
  // 添加的方法
  function addTodo(name){
    let newToduList = ToduList.concat({id:Date.now(),name,done:false})
    localStorage.setItem('toduList',JSON.stringify(newToduList))
    setToduList(newToduList)
  }
  // 修改状态的方法
  function update(id){
    let newToduList =ToduList.map(todo=>todo.id===id?{...todo,done:!todo.done}:todo)
    localStorage.setItem('toduList',JSON.stringify(newToduList))
    setToduList(newToduList)
  }
  // 删除的方法
  function del(id){
    let newToduList =ToduList.filter(todu=>todu.id!==id)
    localStorage.setItem('toduList',JSON.stringify(newToduList))
    setToduList(newToduList)
  }
  // 全选 
  function checkAll(val){
    let newToduList =ToduList.map(item=>{
      return {...item,done:val}
    })
    localStorage.setItem('toduList',JSON.stringify(newToduList))
    setToduList(newToduList)
  }
  // 删除全部选中
  function delAll(){
    let newToduList = ToduList.filter(item=>!item.done)
    localStorage.setItem('toduList',JSON.stringify(newToduList))
    setToduList(newToduList)
  }
  return (
    <div className="Todu">
    <Input addTodo={addTodo} ></Input>
    <List ToduList={ToduList} update={update} del={del}></List>
    <Foot checkAll={checkAll} delAll={delAll} ToduList={ToduList}></Foot>
    </div>
  )
}
export default Todu